<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"> <![endif]-->

<!--[if gt IE 8]><!--> 
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"> <!--<![endif]-->


    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>RabatTour - BackOffice</title>
        <meta name="description" content="RabatTour - BackOffice" />
        <meta name="author" content="AbdelAli Eramli" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="shortcut icon" href="img/favicon.ico" />
        <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
        <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />
        <link rel="stylesheet" href="css/bootstrap.css" />
        <link rel="stylesheet" href="css/plugins.css" />
        <link rel="stylesheet" href="css/main.css" />
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

        <script>if (!window.jQuery)
                document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script> 

        <script src="js/vendor/bootstrap.min.js"></script> 
        <script src="js/plugins.js"></script> 
        <script src="js/main.js"></script>
        <!-- données pour le graphe de statistiques !-->
    </head>
    
    <h:body>
        <f:event type="javax.faces.event.PreRenderViewEvent" listener="#{beanPharmacies.preRenderView}"/>   
        
        <div id="page-container">

            <!--****************************************** barre de navigation ********************************************!-->
            <header class="navbar navbar-inverse">
    <div class="navbar-inner remove-radius remove-box-shadow">
        <div class="container-fluid">

            <ul class="nav pull-right visible-phone visible-tablet">
                <li class="divider-vertical remove-margin"></li>
                <li> <a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse"> <i class="icon-reorder"></i> </a> </li>
            </ul>

            <a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>

            <div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>

            <ul id="widgets" class="nav pull-right">         

                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Messages ********************************************!-->
                <li id="messages-widget" class="dropdown dropdown-left-responsive"> <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-envelope"></i> <span class="badge badge-success">2</span> </a>

                    <ul class="dropdown-menu widget pull-right">
                        <li class="widget-heading"><i class="icon-comment pull-right"></i>Derniers Messages</li>
                        <li class="new-on">

                            <div class="media"> <a class="pull-left" href="javascript:void(0)"> <img src="img/placeholders/image_light_64x64.png" alt="fakeimg" /> </a>
                                <div class="media-body">
                                    <h6 class="media-heading"><a href="javascript:void(0)">Sidy</a><span class="label label-success">2 min ago</span></h6>
                                    <div class="media">Il y a un restaurant à repertorier!</div>
                                </div>
                            </div>

                        </li>

                        <li class="divider"></li>
                        <li>
                            <div class="media"> <a class="pull-left" href="javascript:void(0)"> <img src="img/placeholders/image_light_64x64.png" alt="fakeimg" /> </a>
                                <div class="media-body">
                                    <h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
                                    <div class="media">The logo is ready, have a look and let me know what you think!</div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li class="text-center"><a href="javascript:void(0)">Tous les Messages</a></li>
                    </ul>
                </li>
                <!--****************************************** Messages ********************************************!-->


                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Notifications ********************************************!-->

                <li id="notifications-widget" class="dropdown dropdown-center-responsive"> 
                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"> 
                        <i class="icon-flag"></i> 
                        <span class="badge badge-important">1</span> 
                        <span class="badge badge-warning">2</span> 
                    </a>
                    <ul class="dropdown-menu widget">
                        <li class="widget-heading">
                            <a href="javascript:void(0)" class="pull-right widget-link">
                                <i class="icon-cog"></i>
                            </a>
                            <a href="javascript:void(0)" class="widget-link">Important</a>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-important">20 min ago</li>
                                <li class="text-error">Fiche pharmacie signalé</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-warning">3 hours ago</li>
                                <li class="text-warning">PHP upgrade started!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-warning">5 hours ago</li>
                                <li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
                            </ul>
                        </li>
                        <li class="widget-heading">
                            <a href="javascript:void(0)" class="pull-right widget-link">
                                <i class="icon-bookmark"></i>
                            </a>
                            <a href="javascript:void(0)" class="widget-link">Autres</a>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-success">3 weeks ago</li>
                                <li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label label-info">1 month ago</li>
                                <li class="text-info">Milestone #3 achieved!</li>
                                <li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="label">1 year ago</li>
                                <li class="text-muted">This is an old notification</li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li class="text-center"><a href="javascript:void(0)">Toutes les notifications</a></li>
                    </ul>
                </li>

                <!--****************************************** Notifications ********************************************!-->


                <li class="divider-vertical remove-margin"></li>

                <!--****************************************** Session utilisateur ********************************************!-->

                <li class="dropdown dropdown-user"> 

                    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="img/template/avatar.png" alt="avatar" /> 
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li> 
                            <a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Actualiser</a> 
                        </li>
                        <li class="divider"></li>

                        <li> 
                            <a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> Profile</a> 
                        </li>

                        <li> <a href="javascript:void(0)"><i class="icon-wrench"></i> Paramètres</a> </li>

                        <li class="divider"></li>

                        <li> <a href="page_login.php"><i class="icon-lock"></i>Quitter</a> </li>

                    </ul>
                </li>

                <!--****************************************** Session utilisateur ********************************************!-->

            </ul>
        </div>
    </div>
</header>

            <!--****************************************** barre de navigation ********************************************!-->

            <!--****************************************** Menu vertical ********************************************!-->
            <div id="inner-container">

                <aside id="page-sidebar" class="nav-collapse collapse">

    <!--****************************************** Barre de recherche ********************************************!-->
    <form id="sidebar-search" method="post" onsubmit="return false;" >

        <div class="input-append">
            <input type="text" placeholder="Rechercher..." class="remove-box-shadow remove-transition remove-radius" />
            <button><i class="icon-search"></i></button>
        </div>

    </form>

    <!--****************************************** Barre de recherche ********************************************!-->

    <!--****************************************** Item du menu ********************************************!-->

    <nav id="primary-nav">

        <ul>

            <li> <a href="index.php" class="active"><i class="icon-fire"></i>Dashboard</a> </li>

            <li> <a href="#"><i class="icon-medkit"></i>Pharmacies</a>
                <ul>
                    <li> <a href="#modal-add-pharmacie" role="button" data-toggle="modal"><i class="icon-plus-sign"></i>Ajouter</a> </li>
                    <li><h:link outcome="pharmacies.xhtml"><i class="icon-table"></i> Lister</h:link>  </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Hôtels</a>
                <ul>
                    <li> <a href="page_charts.php"><i class="icon-bar-chart"></i>Statistiques</a> </li>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Restaurants</a>
                <ul>
                    <li> <a href="page_charts.php"><i class="icon-bar-chart"></i>Statistiques</a> </li>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Supers Marchés</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Banques</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Stations de servies</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Institutions</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Train et Tramway</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Evenements</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="#"><i class="icon-leaf"></i>Administrateurs</a>
                <ul>
                    <li> <a href="page_forms.php"><i class="icon-th-list"></i>Ajouter</a> </li>
                    <li> <a href="page_tables.php"><i class="icon-table"></i>Lister</a> </li>
                </ul>
            </li>

            <li> <a href="page_login.php"><i class="icon-off"></i>Quitter</a> </li>
        </ul>
    </nav>

    <!--****************************************** Item du menu ********************************************!-->

    <!--****************************************** Option d'affichage ********************************************!-->

    <div id="theme-options" class="text-left hidden-phone hidden-tablet"> 
        <a href="#" class="btn btn-theme-options" data-toggle="tooltip" data-placement="right" title="Demo Theme Options">
            <i class="icon-cog"></i>
        </a>

        <div id="theme-options-content" class="text-center">

            <div id="topt-fixed-header-top" class="input-switch switch-small" data-toggle="tooltip" title="Fixer Navigation" data-on="success" data-off="danger" data-on-label="" data-off-label="">
                <input type="checkbox" />
            </div>

            <div id="topt-fixed-header-bottom" class="input-switch switch-small" data-toggle="tooltip" title="Fixer Navigation en bas" data-on="success" data-off="danger" data-on-label="" data-off-label="">
                <input type="checkbox" />
            </div>

            <div id="topt-fixed-layout" class="input-switch switch-small" data-toggle="tooltip" title="Fixer la résolution" data-on="success" data-off="danger" data-on-label="" data-off-label="">
                <input type="checkbox" />
            </div>

        </div>
    </div>

    <!--****************************************** Option d'affichage ********************************************!-->

</aside>

                <!--****************************************** Contenu ********************************************!-->
                <div id="page-content">

                    <!--****************************************** Navigation rapide ********************************************!-->
                    <ul id="nav-info" class="clearfix">
                        <li><a href="index.php"><i class="icon-home"></i></a></li>
                        <li class="active"><a href="">Dashboard</a></li>
                    </ul>
                    <!--****************************************** Navigation rapide ********************************************!-->


                    <!--****************************************** Navigation Arroundi ********************************************!-->
                    <ul class="nav-dash">

                        <li> 
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Pharmacies"> 
                                <i class="icon-medkit"></i>
                                <span class="badge badge-success"><h:outputText value="#{beanPharmacies.count()}"/></span>
                            </a> 
                        </li>

                        <li> 
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Commentaires"> 
                                <i class="icon-comments"></i>
                                <span class="badge badge-inverse">3</span>
                            </a> 
                        </li>

                        <li> 
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Evenements"> 
                                <i class="icon-calendar"></i>
                                <span class="badge badge-warning">3</span>
                            </a> 
                        </li>

                    </ul>
                    <!--****************************************** Navigation Arroundi ********************************************!-->


                    <div class="dash-tiles row-fluid">


                        <!--****************************************** colone 1 ********************************************!-->
                        <div class="span3">

                            <div class="dash-tile dash-tile-ocean clearfix">
                                <div class="dash-tile-header">

                                    <div class="dash-tile-options">
                                        <div class="btn-group"> 
                                            <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Détails"><i class="icon-cog"></i></a> 
                                            <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Statistics"><i class="icon-bar-chart"></i></a> </div>
                                    </div>

                                    Total des utilisateurs </div>

                                <div class="dash-tile-icon"><i class="icon-group"></i></div>

                                <div class="dash-tile-text">1.200.000</div>
                            </div>

                            <div class="dash-tile dash-tile-leaf clearfix">
                                <div class="dash-tile-header"> <span class="dash-tile-options"> <a href="javascript:void(0)" class="btn" data-toggle="popover" data-placement="top" data-content="$500 (230 Sales)" title="Today's profit"><i class="icon-credit-card"></i></a> </span> Total Profit </div>
                                <div class="dash-tile-icon"><i class="icon-money"></i></div>
                                <div class="dash-tile-text">$5M</div>
                            </div>

                        </div>

                        <!--****************************************** colone 1 ********************************************!-->

                        <!--****************************************** colone 2 ********************************************!-->
                        <div class="span3">
                            <div class="dash-tile dash-tile-flower clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options">
                                        <div class="btn-group"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="View new orders"><i class="icon-shopping-cart"></i></a> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Statistics"><i class="icon-bar-chart"></i></a> </div>
                                    </div>
                                    Total Sales </div>
                                <div class="dash-tile-icon"><i class="icon-tags"></i></div>
                                <div class="dash-tile-text">300k</div>
                            </div>
                            <div class="dash-tile dash-tile-fruit clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="View popular downloads"><i class="icon-asterisk"></i></a> </div>
                                    Total Downloads </div>
                                <div class="dash-tile-icon"><i class="icon-cloud-download"></i></div>
                                <div class="dash-tile-text">360k</div>
                            </div>
                        </div>
                        <!--****************************************** colone 2 ********************************************!-->

                        <!--****************************************** colone 3 ********************************************!-->
                        <div class="span3">
                            <div class="dash-tile dash-tile-oil clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options">
                                        <div class="btn-group"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="What's changed?"><i class="icon-fire"></i></a> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Share"><i class="icon-share"></i></a> </div>
                                    </div>
                                    Popularity </div>
                                <div class="dash-tile-icon"><i class="icon-globe"></i></div>
                                <div class="dash-tile-text">+90%</div>
                            </div>
                            <div class="dash-tile dash-tile-dark clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Monthly report"><i class="icon-bar-chart"></i></a> </div>
                                    Server Downtime </div>
                                <div class="dash-tile-icon"><i class="icon-hdd"></i></div>
                                <div class="dash-tile-text">0.1%</div>
                            </div>
                        </div>
                        <!--****************************************** colone 3 ********************************************!-->

                        <!--****************************************** colone 4 ********************************************!-->
                        <div class="span3">
                            <div class="dash-tile dash-tile-balloon clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Manage subscribers"><i class="icon-cog"></i></a> </div>
                                    RSS Subscribers </div>
                                <div class="dash-tile-icon"><i class="icon-rss"></i></div>
                                <div class="dash-tile-text">160k</div>
                            </div>
                            <div class="dash-tile dash-tile-doll clearfix">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options"> <a href="javascript:void(0)" class="btn" data-toggle="tooltip" title="Open tickets"><i class="icon-file-alt"></i></a> </div>
                                    Total Tickets </div>
                                <div class="dash-tile-icon"><i class="icon-wrench"></i></div>
                                <div class="dash-tile-text">1.5k</div>
                            </div>
                        </div>
                        <!--****************************************** colone 4 ********************************************!-->
                    </div>

                    <!--****************************************** statistiques ********************************************!-->
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="dash-tile dash-tile-2x">
                                <div class="dash-tile-header">
                                    <div class="dash-tile-options">
                                        <div id="example-advanced-daterangepicker" class="btn"> <i class="icon-calendar"></i> <span></span> <b class="caret"></b> </div>
                                    </div>
                                    <i class="icon-bar-chart"></i> </div>
                                <div class="dash-tile-content">
                                    <div id="dash-example-stats" class="dash-tile-content-inner"></div>
                                </div>
                            </div>
                        </div>        
                    </div>
                    <!--****************************************** statistiques ********************************************!-->

                </div>

                <footer> 
                    <script>var d = new Date();
            if (d.getFullYear() === 2013) {
                document.write('2013');
            } else {
                document.write('2013-' + d.getFullYear());
            }</script> Andcopy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong> 
                </footer>

            </div>

        </div>

        <a href="#" id="to-top"><i class="icon-chevron-up"></i></a>

        <div id="modal-add-pharmacie" class="modal hide">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4>Ajouter une Pharmacie</h4>
            </div>

            <div class="modal-body">

                <h:form class="form-horizontal" >            
                    <div class="control-group">
                        <label class="control-label" for="nom-pharmacie">Nom de la pharmacie</label>
                        <div class="controls">
                            <h:inputText id="nom-pharmacie" required="true" value="#{beanPharmacies.pharmacies.nom}" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="adresse-pharmacie">Adresse</label>
                        <div class="controls">
                            <h:inputText id="adresse-pharmacie" required="true" value="#{beanPharmacies.pharmacies.adresse}" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="tel-pharmacie">N° Tel</label>
                        <div class="controls">
                            <h:inputText id="tel-pharmacie" required="true" value="#{beanPharmacies.pharmacies.tel}" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="lat-pharmacie">Latitude</label>
                        <div class="controls">
                            <h:inputText id="lat-pharmacie" required="true" value="#{beanPharmacies.pharmacies.latitude}" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="long-pharmacie">Longitude</label>
                        <div class="controls">
                            <h:inputText id="long-pharmacie" required="true" value="#{beanPharmacies.pharmacies.longitude}" />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Annuler</button>
                        <h:commandButton action="#{beanPharmacies.add()}" class="btn btn-success" value="Confirmer"></h:commandButton>
                    </div>
                </h:form>
            </div>
        </div>

        <div id="modal-user-settings" class="modal hide">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4>Profile Settings</h4>
            </div>
            <div class="modal-body">
                <ul id="example-user-tabs" class="nav nav-tabs">
                    <li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
                    <li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="example-user-tabs-account">
                        <div class="alert alert-success">
                            <button type="button" class="close" data-dismiss="alert">Andtimes;</button>
                            <strong>Success!</strong> Password changed! </div>
                        <form class="form-horizontal" >

                            <div class="control-group">
                                <label class="control-label" for="example-user-username">Username</label>
                                <div class="controls">
                                    <input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
                                    <span class="help-block">You can't change your username!</span> </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-pass">Password</label>
                                <div class="controls">
                                    <input type="password" id="example-user-pass" />
                                    <span class="help-block">if you want to change your password enter your current for confirmation!</span> </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-newpass">New Password</label>
                                <div class="controls">
                                    <input type="password" id="example-user-newpass" />
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="example-user-tabs-profile">
                        <h5 class="page-header-sub hidden-phone">Image</h5>
                        <div class="form-horizontal hidden-phone">
                            <div class="control-group"> <img src="img/placeholders/image_dark_120x120.png" alt="image" /> </div>
                            <div class="control-group">
                                <form action="index.php" class="dropzone" >

                                    <div class="fallback">
                                        <input name="file" type="file" />
                                    </div>
                                </form>
                            </div>
                        </div>
                        <form class="form-horizontal" >

                            <h5 class="page-header-sub">Details</h5>
                            <div class="control-group">
                                <label class="control-label" for="example-user-firstname">Firstname</label>
                                <div class="controls">
                                    <input type="text" id="example-user-firstname" value="John" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-lastname">Lastname</label>
                                <div class="controls">
                                    <input type="text" id="example-user-lastname" value="Doe" />
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-gender">Gender</label>
                                <div class="controls">
                                    <select id="example-user-gender">
                                        <option />
                                        Male

                                        <option />
                                        Female

                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-birthdate">Birthdate</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
                                        <span class="add-on"><i class="icon-calendar"></i></span> </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-skills">Skills</label>
                                <div class="controls">
                                    <select id="example-user-skills" multiple="multiple" class="select-chosen">
                                        <option selected="" />
                                        html

                                        <option selected="" />
                                        css

                                        <option />
                                        javascript

                                        <option />
                                        php

                                        <option />
                                        mysql

                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-bio">Bio</label>
                                <div class="controls">
                                    <textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
                                </div>
                            </div>
                            <h5 class="page-header-sub">Social</h5>
                            <div class="control-group">
                                <label class="control-label" for="example-user-fb">Facebook</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" id="example-user-fb" />
                                        <span class="add-on"><i class="icon-facebook"></i></span> </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-twitter">Twitter</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" id="example-user-twitter" />
                                        <span class="add-on"><i class="icon-twitter"></i></span> </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-pinterest">Pinterest</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" id="example-user-pinterest" />
                                        <span class="add-on"><i class="icon-pinterest"></i></span> </div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="example-user-github">Github</label>
                                <div class="controls">
                                    <div class="input-append">
                                        <input type="text" id="example-user-github" />
                                        <span class="add-on"><i class="icon-github"></i></span> </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
                <button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
            </div>
        </div>



        <script>

            $(function() {
                $("#dash-example-orders").dataTable({aoColumnDefs: [{bSortable: false, aTargets: [0]}], iDisplayLength: 6, aLengthMenu: [[6, 10, 30, -1], [6, 10, 30, "All"]]});
                $("#dash-example-tabs a").click(function(e) {
                    e.preventDefault();
                    $(this).tab("show")
                });
                var e = $("#dash-example-stats");
                var t = [[0, 200], [1, 250], [2, 360], [3, 584], [4, 1250], [5, 1100], [6, 1500], [7, 1521], [8, 1600], [9, 1658], [10, 1623], [11, 1900], [12, 2100], [13, 1700], [14, 1620], [15, 1820], [16, 1950], [17, 2220], [18, 1951], [19, 2152], [20, 2300], [21, 2325], [22, 2200], [23, 2156], [24, 2350], [25, 2420], [26, 2480], [27, 2320], [28, 2380], [29, 2520], [30, 2590]];
                var n = [[0, 50], [1, 180], [2, 200], [3, 350], [4, 700], [5, 650], [6, 700], [7, 780], [8, 820], [9, 880], [10, 1200], [11, 1250], [12, 1500], [13, 1195], [14, 1300], [15, 1350], [16, 1460], [17, 1680], [18, 1368], [19, 1589], [20, 1780], [21, 2100], [22, 1962], [23, 1952], [24, 2110], [25, 2260], [26, 2298], [27, 1985], [28, 2252], [29, 2300], [30, 2450]];
                $.plot(e, [{data: t, lines: {show: true, fill: true, fillColor: {colors: [{opacity: .05}, {opacity: .05}]}}, points: {show: true}, label: "All Visits"}, {data: n, lines: {show: true, fill: true, fillColor: {colors: [{opacity: .05}, {opacity: .05}]}}, points: {show: true}, label: "Unique Visits"}], {legend: {position: "nw", backgroundColor: "#f6f6f6", backgroundOpacity: .8}, colors: ["#555555", "#db4a39"], grid: {borderColor: "#cccccc", color: "#999999", labelMargin: 5, hoverable: true, clickable: true}, yaxis: {ticks: 5}, xaxis: {tickSize: 2}});
                var r = null;
                e.bind("plothover", function(e, t, n) {
                    $("#x").text(t.x.toFixed(2));
                    $("#y").text(t.y.toFixed(2));
                    if (n) {
                        if (r !== n.dataIndex) {
                            r = n.dataIndex;
                            $("#tooltip").remove();
                            var i = n.datapoint[0], s = n.datapoint[1];
                            $('<div id="tooltip" class="chart-tooltip"><strong>' + s + "</strong> visits</div>").css({top: n.pageY - 30, left: n.pageX + 5}).appendTo("body").show()
                        }
                    } else {
                        $("#tooltip").remove();
                        r = null
                    }
                })
            });
        </script>
    </h:body>
</html>

